<template>
  <div class="question-container">
    <el-card>
      <!-- 按钮区域 -->
      <div class="box_wrapper">
        <el-button type="primary" size="small">新增试题</el-button>
        <el-button type="success" size="small">批量导入</el-button>
      </div>
      <!-- 筛选区域 -->
      <el-form label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="rp.subjectID" style="width:100%">
                <el-option
                  v-for="item in subjectOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="rp.difficulty" style="width:100%">
                <el-option
                  v-for="item in difficultyOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="rp.questionType" style="width:100%">
                <el-option
                  v-for="item in questionTypeOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="rp.tags" style="width:100%">
                <el-option
                  v-for="item in tagsOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select @change="handleCity" style="width:48%" v-model="rp.province">
                <el-option v-for="item in provinceOptions" :key="item" :value="item" :label="item"></el-option>
              </el-select>
              <el-select style="width:48%" v-model="rp.city">
                <el-option v-for="item in cityOptions" :key="item" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="rp.keyword"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="rp.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="rp.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select style="width:100%" v-model="rp.direction">
                <el-option v-for="item in directionOptions" :key="item" :value="item" :label="item"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="rp.creatorID" style="width:100%">
                <el-option
                  v-for="item in creatorIDOptions"
                  :key="item.id"
                  :value="item.id"
                  :label="item.username"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="rp.catalogID" style="width:100%">
                <el-option
                  v-for="item in catalogIDOptions"
                  :key="item.value"
                  :value="item.value"
                  :label="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item style="text-align:right">
              <el-button size="small">清空</el-button>
              <el-button type="primary" size="small">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 表格区域 -->
      <el-table :data="questions">
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="试题编号" prop="number"></el-table-column>
        <el-table-column label="学科" prop="subject"></el-table-column>
        <el-table-column label="题型">
          <template
            slot-scope="scope"
          >{{questionTypeOptions.find(item=>item.value===+scope.row.questionType).label}}</template>
        </el-table-column>
        <el-table-column label="题干" prop="question"></el-table-column>
        <el-table-column label="录入时间" width="180">
          <template slot-scope="scope">{{scope.row.addDate|parseTimeByString}}</template>
        </el-table-column>
        <el-table-column label="难度">
          <template
            slot-scope="scope"
          >{{difficultyOptions.find(item=>item.value===+scope.row.difficulty).label}}</template>
        </el-table-column>
        <el-table-column label="使用次数" prop="id"></el-table-column>
        <el-table-column label="录入人" prop="creator"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="openDialog(scope.row)">预览</el-button>
            <el-button type="text">修改</el-button>
            <el-button type="text">删除</el-button>
            <el-button type="text">加入精选</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        style="margin-top:20px;text-align:right"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="rp.pagesize"
        :current-page="rp.page"
        @current-change="pager"
        :page-sizes="[1,2,3,4]"
        @size-change="sizer"
      ></el-pagination>
    </el-card>
    <el-dialog title="题目预览" :visible.sync="dialogVisible" width="50%" >
      <span>题目信息  {{currRow.questionType}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { simple as subjectList } from '@/api/hmmm/subjects'
import { simple as tagList } from '@/api/hmmm/tags'
import { simple as userList } from '@/api/base/users'
import { simple as directoryList } from '@/api/hmmm/directorys'
import { list } from '@/api/hmmm/questions'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { provinces as getCity, citys as getArea } from '@/api/hmmm/citys'
export default {
  data() {
    return {
      rp: {
        subjectID: null,
        difficulty: null,
        questionType: null,
        tags: null,
        province: null,
        city: null,
        keyword: null,
        remarks: null,
        shortName: null,
        direction: null,
        catalogID: null,
        creatorID: null,
        page: 1,
        pagesize: 1
      },
      questions: [],
      subjectOptions: [],
      difficultyOptions: difficulty,
      questionTypeOptions: questionType,
      tagsOptions: [],
      provinceOptions: getCity(),
      cityOptions: [],
      directionOptions: direction,
      catalogIDOptions: [],
      creatorIDOptions: [],
      total: 0,
      dialogVisible: false,
      currRow: null
    }
  },
  async created() {
    // 获取学科选项数据
    const { data: subjectArray } = await subjectList()
    this.subjectOptions = subjectArray
    // 获取标签选项数据
    const { data: tagArray } = await tagList()
    this.tagsOptions = tagArray
    // 获取录入人选项数据
    const { data: userArray } = await userList()
    this.creatorIDOptions = userArray
    // 获取二级目录选项数据
    const { data: directoryArray } = await directoryList()
    this.catalogIDOptions = directoryArray
    this.getList()
  },
  methods: {
    openDialog(row) {
      this.dialogVisible = true
      this.currRow = row
    },
    handleCity(cityName) {
      // 根据城市名称获取它管辖的地区
      this.cityOptions = getArea(cityName)
      // 清空 地区  选中的值
      this.rp.city = null
    },
    pager(np) {
      this.rp.page = np
      this.getList()
    },
    sizer(size) {
      this.rp.pagesize = size
      this.rp.page = 1
      this.getList()
    },
    async getList() {
      const { data } = await list(this.rp)
      this.questions = data.items
      this.total = data.counts
    }
  }
}
</script>

<style scoped lang='scss'>
.question-container {
  padding: 10px 15px;
}
.box_wrapper {
  margin-bottom: 15px;
}
</style>
